<template>
  <div>
    <ul>
      <li class="title">
        <span class="index"></span>
        <span class="action">操作</span>
        <span class="songName">标题</span>
        <span class="singer">歌手</span>
        <span class="album">专辑</span>
        <span class="time">时间</span>
      </li>
      <li
        v-for="(item, index) in resultList"
        :key="item.id"
        @dblclick="playSong(item.id)"
        :class="item.id == songID ? 'item active' : 'item'"
      >
        <span class="index">{{ ++index + offset }}</span>
        <span class="action"><i class="iconfont icon-aixin-xian"></i></span>
        <span class="songName">
          <i class="songname">{{ item.name }}</i>
          <span class="icon" v-show="item.mv > 0" @click="toWatch(item.mv)"
            ><i class="iconfont icon-video"></i
          ></span>
          <span class="vip" v-show="item.fee == 1"
            ><i class="iconfont icon-VIP"></i
          ></span>
        </span>
        <span class="singer" @click="toDetail(item.ar[0].id)">{{
          getAllsinger(item.ar)
        }}</span>
        <span class="album">{{ item.al.name }}</span>
        <span class="time">{{ getSongTime(item.dt) }}</span>
      </li>
    </ul>
    <paging
      :pagingMethod="getResult"
      :load="keywords"
      :totalPages="totalPages"
      v-show="resultList.length > 0"
    ></paging>
  </div>
</template>

<script>
import { searchAPI } from "@/api/index";
import Paging from "@/components/Paging.vue";
export default {
  components: { Paging },
  name: "SongRs",
  data() {
    return {
      resultList: [],
      offset: 0, //分页参数
      totalPages: 0, //总页数
    };
  },
  methods: {
    async getResult(n) {
      this.offset = (n - 1) * 50;
      searchAPI({
        keywords: this.keywords,
        type: 1,
        limit: 50,
        offset: this.offset,
      }).then(
        (res) => {
          if (res.data.code == 200) {
            this.resultList = res.data.result.songs;
            this.totalPages = Math.ceil(res.data.result.songCount / 50);
          }
          if (n != 1) this.main.scrollTo({ top: 0 });
        },
        (error) => {
          this.errorMsg.innerHTML = "网络错误";
          this.errorMsg.style.display = "block";
          setTimeout(() => {
            this.errorMsg.style.display = "none";
          }, 1000);
        }
      );
    },
    // 播放歌曲
    playSong(id) {
      this.$store.dispatch("play/updateSongId", id);
    },
    // 获取歌曲列表
    async getSongList(id) {
      const res = await getSheetListAllAPI({ id });
      this.songList = res.data.songs;
    },
    //处理歌曲时间  参数单位毫秒
    getSongTime(time) {
      let secondSum = Math.floor(time / 1000);
      let min = Math.floor(secondSum / 60);
      let second = secondSum % 60;
      if (min < 10) {
        min = "0" + min;
      }
      if (second < 10) {
        second = "0" + second;
      }
      return min + ":" + second;
    },
    //处理多位歌手
    getAllsinger(arr) {
      let singers = "";
      arr.forEach((item) => {
        singers += item.name;
        singers += "/";
      });
      return singers.slice(0, singers.length - 1);
    },
    // 去歌手详情
    toDetail(id) {
      this.$router.push({
        name: "detail",
        query: {
          id,
        },
      });
    },
    //去看MV
    toWatch(id) {
      this.$router.push({
        name: "watch",
        query: {
          id,
        },
      });
    },
  },
  computed: {
    keywords() {
      return this.$store.state.search.searchWord;
    },
    songID() {
      return this.$store.state.play.id;
    },
    main() {
      return this.$store.state.scroll.main;
    },
    // 错误提示框
    errorMsg() {
      return this.$store.state.scroll.error;
    },
  },
  watch: {
    keywords() {
      this.getResult(1);
    },
  },
  mounted() {
    this.getResult(1);
  },
};
</script>

<style lang="less" scoped>
ul {
  width: 100%;
  font-size: 13px;
  color: #333;
  li {
    display: block;
    height: 35px;
    width: 100%;
    display: flex;
    user-select: none;
    span {
      display: block;
      color: #666;
      line-height: 35px;
      cursor: default;
    }
    .index {
      width: 4%;
      text-align: center;
      color: #999;
    }
    .action {
      width: 9%;
      text-align: center;
    }
    .songName {
      width: 32%;
      color: black;
      display: flex;
      i {
        font-style: normal;
        display: block;
      }
      .songname {
        max-width: 200px;
        overflow: hidden;
        word-wrap: break-word; /*强制换行*/
        overflow: hidden; /*超出隐藏*/
        text-overflow: ellipsis; /*隐藏后添加省略号*/
        white-space: nowrap; /*强制不换行*/
      }
      .vip {
        width: 20px;
        height: 12px;
        color: #ff7a9e;
        margin-top: 1px;
        margin-left: 2px;
        i {
          font-size: 28px;
        }
      }
      .icon {
        margin-left: 5px;
        margin-top: 11px;
        cursor: default;
        width: 20px;
        height: 12px;
        color: #ff7a9e;
        cursor: pointer;
        i {
          margin-top: -10px;
          font-size: 16px;
          text-align: center;
        }
      }
      .vip {
        font-size: 12px;
      }
      .icon:hover {
        color: #f39db4;
      }
    }
    .singer {
      width: 18%;
      overflow: hidden;
      cursor: pointer;
      word-wrap: break-word; /*强制换行*/
      overflow: hidden; /*超出隐藏*/
      text-overflow: ellipsis; /*隐藏后添加省略号*/
      white-space: nowrap; /*强制不换行*/
    }
    .album {
      width: 20%;
      overflow: hidden;
      word-wrap: break-word; /*强制换行*/
      overflow: hidden; /*超出隐藏*/
      text-overflow: ellipsis; /*隐藏后添加省略号*/
      white-space: nowrap; /*强制不换行*/
    }
    .time {
      width: 7%;
      color: #999;
      overflow: hidden;
      word-wrap: break-word; /*强制换行*/
      overflow: hidden; /*超出隐藏*/
      text-overflow: ellipsis; /*隐藏后添加省略号*/
      white-space: nowrap; /*强制不换行*/
    }
  }
  li.active {
    background-color: rgb(229, 229, 229) !important;
    .songname {
      color: #ff7a9e;
    }
  }
  li:nth-child(2n) {
    background-color: rgb(249, 249, 249);
  }
  .item:hover {
    background-color: rgb(240, 241, 242);
  }
  .item .action:hover {
    color: black;
  }
}
</style>